import React, {Component} from 'react';
import {reqAddFriendLink, reqFriendLink, reqDeleteLink} from "../../../api";
import {formatDate} from "../../../util";
import {
    Card, Button, Table, Image, Form, Input,
    Typography, Tag, Popconfirm, Space, Modal, message
} from 'antd';
import {PlusOutlined, DeleteOutlined} from '@ant-design/icons';

const {Link} = Typography;

class FriendLink extends Component {

    state = {
        dataSource: [],
        current: 1,
        total: 0,
        isModalVisible: false
    }

    formRef = React.createRef();

    componentDidMount() {
        this.initDataSource();
    }

    initDataSource = async () => {
        let {current} = this.state;
        let {data} = await reqFriendLink(current);
        let {total, list} = data;
        let dataSource = list.reverse();
        this.setState({dataSource, total});
    }

    changePage = (pageInfo) => {
        let {current} = pageInfo;
        this.setState({current}, () => {
            this.initDataSource();
        });
    }

    handleOk = () => {
        this.formRef.current.validateFields().then(async value => {
            let {status, msg} = await reqAddFriendLink(value);
            if (status === 0) {
                message.success(msg);
                this.setState({isModalVisible: false});
                this.initDataSource();
                this.resetForm();
                return;
            }
            message.error(msg);
        }).catch(() => {
            message.error("必填项不能为空");
            this.setState({isModalVisible: true})
        })
    }

    deleteLink = async (data) => {
        let {status, msg} = await reqDeleteLink(data.id);
        if (status === 0) {
            message.success(msg);
            this.initDataSource();
            return;
        }
        message.error(msg);
    }

    resetForm = () => {
        this.formRef.current.resetFields();
    }

    handleCancel = () => {
        this.resetForm();
        this.setState({isModalVisible: false})
    }

    columns = [
        {
            title: '网站名',
            dataIndex: 'title',
            render: (_, record) => {
                let {id, title} = record;
                return (id % 2 === 0) ? <Tag color="lime">{title}</Tag> : <Tag color="blue">{title}</Tag>
            }
        },
        {
            title: '网址',
            dataIndex: 'url',
            render: (data) => {
                return <Link href={data} target="_blank">{data}</Link>
            }
        },
        {
            title: '缩略图',
            dataIndex: 'img',
            render: (data) => {
                return <Image src={data} width={100}/>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            render: (data) => {
                return formatDate("YYYY-MM-dd HH:mm:ss", data);
            }
        },
        {
            title: '操作',
            render: (data) => {
                return <Space size="small">
                    <Popconfirm
                        title="确定删除吗？"
                        onConfirm={() => this.deleteLink(data)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button size="small" danger icon={<DeleteOutlined/>}/>
                    </Popconfirm>
                </Space>
            }
        },
    ];

    render() {
        let {dataSource, isModalVisible, total} = this.state;
        return (
            <div>
                <Card extra={<Button
                    type="primary"
                    onClick={() => this.setState({isModalVisible: true})}
                    icon={<PlusOutlined/>}>添加友链</Button>}>
                    <Table
                        rowKey="id"
                        size="small"
                        onChange={this.changePage}
                        pagination={{total, showTotal:(total) =>  `共 ${total} 条`}}
                        dataSource={dataSource}
                        columns={this.columns}/>
                </Card>
                <Modal title="添加友链" visible={isModalVisible}
                       onOk={this.handleOk}
                       onCancel={this.handleCancel}>
                    <Form
                        name="basic"
                        ref={this.formRef}
                    >
                        <Form.Item
                            label="网站名"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入网站名',
                                },
                            ]}
                        >
                            <Input placeholder="请输入网站名"/>
                        </Form.Item>
                        <Form.Item
                            label="网&nbsp;&nbsp;&nbsp;&nbsp;址"
                            name="url"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入网址',
                                },
                            ]}
                        >
                            <Input placeholder="请输入网址"/>
                        </Form.Item>
                        <Form.Item
                            label="缩略图"
                            name="img"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入缩略图地址',
                                },
                            ]}
                        >
                            <Input placeholder="请输入缩略图地址"/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default FriendLink;


